<template>
  <div class="order-list">
      <el-form-item label="订单号">
        <el-input v-model="orderNumber" placeholder="订单号"/>
      </el-form-item>
      <el-form-item label="收货人">
        <el-input v-model="consignees" placeholder="收货人"/>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="phoneNumber" placeholder="手机号"/>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="orderStatus" placeholder="订单状态">
          <el-option label="已完成" value="已完成" />
          <el-option label="已受理" value="已受理" />
          <el-option label="派送中" value="派送中" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          start-placeholder="Start date"
          end-placeholder="End date"
          format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY/MM/DD ddd"
          time-format="A hh:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
     <!-- 订单表格 -->
    <el-table :data="orderForm" border style="width: 100%" :row-class-name="getRowClassName">
    <el-table-column label="订单号" prop="orderNo" />
    <el-table-column label="下单时间" prop="orderTime" />
    <el-table-column label="手机号" prop="phone" />
    <el-table-column label="收货人" prop="consignee" />
    <el-table-column label="配送地址" prop="deliverAddress" />
    <el-table-column label="送达时间" prop="deliveryTime" />
    <el-table-column label="用户备注" prop="remarks" />
    <el-table-column label="订单金额" prop="orderAmount" />
    <el-table-column label="订单状态" prop="orderState" />
    <el-table-column label="操作"  width="150">
      <template #default="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)" >
          编辑
        </el-button>
        <el-button
          size="small"
          @click="handleinquire(scope.$index, scope.row)"
        >
          查看
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <div class="demo-pagination-block">
  <el-pagination
      v-model:current-page="pageInformation.currentPage"
      v-model:page-size="pageInformation.pageSize"
      :page-sizes="[5, 10, 20, 50]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <!-- 查看 的弹出框 -->
  <el-dialog v-model="isDialogVisible" title="订单详情" width="500">
    <div v-if="currentOrder">
      <h3>订单号：{{ currentOrder.orderNo }}</h3>
      <h3>下单时间：{{ currentOrder.orderTime }}</h3>
      <h3>手机号：{{ currentOrder.phone }}</h3>
      <h3>收货人：{{ currentOrder.consignee }}</h3>
      <h3>配送地址：{{ currentOrder.deliverAddress }}</h3>
      <h3>送达时间：{{ currentOrder.deliveryTime }}</h3>
      <h3>用户备注：{{ currentOrder.remarks }}</h3>
      <h3>订单金额：{{ currentOrder.orderAmount }}</h3>
      <h3>订单状态：{{ currentOrder.orderState }}</h3>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { orderInfo } from '@/api/order'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router';
import { ElDialog } from 'element-plus'; // 引入 el-dialog 组件

const router = useRouter();
let editInfo = []; // 存储编辑的订单信息
const total = ref(); // 总条数
// 分页信息
const pageInformation = reactive({
  currentPage: 1,
  pageSize: 5
});
const allOrders = ref([]); // 存储所有订单数据
const orderForm = ref([]); // 存储当前显示的订单数据

// 控制弹出框的显示状态
const isDialogVisible = ref(false);
// 当前查看的订单数据
const currentOrder = ref(null);

// 获取订单列表
const getOrderList = async () => {
  let res = await orderInfo(pageInformation)
  console.log(res);
  allOrders.value = res.data;
  total.value = res.total;
  orderForm.value = allOrders.value;
  // 时间处理
  orderForm.value.forEach(item => {
    item.orderTime = dayjs(item.orderTime).format('HH:mm:ss');
    item.deliveryTime = dayjs(item.deliveryTime).format('HH:mm:ss');
  });
}
getOrderList();

// 定义查询条件
const orderNumber = ref('');
const consignees = ref('');
const phoneNumber = ref('');
const orderStatus = ref('');
const dateRange = ref([]);

// 查询 
const onSubmit = () => {
  // 收集查询条件
  const queryParams = {
    orderNumber: orderNumber.value,
    consignees: consignees.value,
    phoneNumber: phoneNumber.value,
    orderStatus: orderStatus.value,
    startDate: dateRange.value[0],
    endDate: dateRange.value[1]
  };
 
  // 过滤查询结果
  orderForm.value = allOrders.value.filter(item => {
    const orderTime = dayjs(item.orderTime).format('HH:mm:ss');
    const deliveryTime = dayjs(item.deliveryTime).format('HH:mm:ss');
    return (
      // 短路原则
      (!queryParams.orderNumber || item.orderNo.includes(queryParams.orderNumber)) &&
      (!queryParams.consignees || item.consignee.includes(queryParams.consignees)) &&
      (!queryParams.phoneNumber || item.phone.includes(queryParams.phoneNumber)) &&
      (!queryParams.orderStatus || item.orderState === queryParams.orderStatus) &&
      (!queryParams.startDate || dayjs(orderTime).isSameOrAfter(queryParams.startDate)) &&
      (!queryParams.endDate || dayjs(deliveryTime).isSameOrBefore(queryParams.endDate))
    );
  });
};

// 分页处理
const handleSizeChange = () => {
  getOrderList();
}
const handleCurrentChange = () => {
  getOrderList();
}
// 背景色处理
const getRowClassName = ({ row, rowIndex }) => {
  if (rowIndex%2==0) {
    return 'even-row';
  }
  return 'odd-row';
};
// 编辑
const handleEdit = async (index, row) => {
  editInfo = row;
  sessionStorage.setItem('editInfo', JSON.stringify(editInfo));
  router.push('/orderEdit')
}
// 查看
const handleinquire = (index, row) => {
  console.log(index, row);
  editInfo = row;
  sessionStorage.setItem('editInfo', JSON.stringify(editInfo));
  currentOrder.value = row;
  isDialogVisible.value = true;
}
</script>

<style lang="scss" scoped>
.order-list{
  width: 100%;
  // height: 100%;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
}
:deep(.el-form-item){
  margin-right: 10px;
}
:deep(.el-select__wrapper){
  width: 200px;
}
.demo-pagination-block{
  margin: 15px 0 0 0;
  padding-left: 15px;
}
:deep(.btn-prev){
  margin-left: 80px;
}
// 表格背景颜色
:deep(.even-row){
  background-color: #94c4f4;
}
:deep(.odd-row){
  background-color: #f5f5a8;
}
</style>